<template>
  <div class="container">
    <div class="header">
      <router-link to="/main/renshi/renshidiaodong">
        <el-button icon="el-icon-back">返回</el-button>
      </router-link>
      <span>
        <el-button icon="el-icon-printer" @click="printForm">打印</el-button>
        <el-button @click="showPage('休职定义')">休职申请（定义）</el-button>
        <el-button @click="showPage('员工休职申请表')">员工休职申请表</el-button>
        <el-button @click="goToList">休职列表</el-button>
      </span>
    </div>
    <!-- 休职定义页面 -->
    <div class="page" v-if="currentPage === '休职定义'">
      <h2 style="text-align: center">休职申请</h2>
      <h2>休职的定义</h2>
      <p>
        休职是指个人在职务或职业上的暂时停止，这并不是永久性地离开工作岗位，而是由于某种原因，如个人健康原因、学习进修、家庭因素等，需要暂时中断工作的状态。在休职期间，个人与工作单位的劳动关系依然存在，只是暂时不承担具体的工作职责和任务。
      </p>
      <p>可能的原因如下：</p>
      <ol>
        <li>由于个人身体健康原因，需要暂时离开工作岗位进行疗养或治疗。</li>
        <li>个人为了提升自我，选择进修学习，暂时中断工作。</li>
        <li>家庭因素也是休职的一个常见原因，例如照顾家庭、处理家务等。</li>
      </ol>
      <p>
        不论原因如何，休职都是个人与工作单位协商后的结果，旨在平衡工作与生活的关系。休职期间的待遇包括部分福利待遇、基本工资和社保。尽量回原岗位，回归时需明确工作职责、职位和待遇。
      </p>
    </div>
    <!-- 员工休职申请表单页面 -->
    <div class="page" v-if="currentPage === '员工休职申请表'">
      <h2 style="text-align: center">员工休职申请</h2>
      <el-form 
        ref="leaveForm" 
        :model="application" 
        :rules="rules"
        label-width="120px"
        :disabled="type === 'view'"
      >
        <el-form-item label="员工姓名" prop="employeeName">
          <el-input v-model="application.employeeName"></el-input>
        </el-form-item>
        
        <el-form-item label="工号" prop="employeeId">
          <el-input v-model="application.employeeId"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="department">
          <el-input v-model="application.department"></el-input>
        </el-form-item>

        <el-form-item label="休职原因" prop="leaveReason">
          <el-select v-model="application.leaveReason" style="width: 100%">
            <el-option label="健康原因" value="健康原因"></el-option>
            <el-option label="学习进修" value="学习进修"></el-option>
            <el-option label="家庭因素" value="家庭因素"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="休职开始日期" prop="startDate">
          <el-date-picker
            v-model="application.startDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="休职结束日期" prop="endDate">
          <el-date-picker
            v-model="application.endDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="详细说明" prop="description">
          <el-input
            type="textarea"
            v-model="application.description"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item v-if="type !== 'view'">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="footer">
        <span>表单编号及版本：AM - JY - 011 A/1</span>
        <span>保存期限：长期</span>
      </div>
    </div>
    <!-- 休职列表页面 -->
    <div class="page" v-if="currentPage === '休职列表'">
      <span class="list">
        <h2 style="text-align: center">休职列表</h2>
        <table>
          <thead>
            <tr>
              <th>员工姓名</th>
              <th>部门</th>
              <th>休职原因</th>
              <th>休职开始日期</th>
              <th>休职结束日期</th>
              <th>详细说明</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in leaveList" :key="index">
              <td>{{ item.employeeName }}</td>
              <td>{{ item.department }}</td>
              <td>{{ item.reason }}</td>
              <td>{{ item.startDate }}</td>
              <td>{{ item.endDate }}</td>
              <td>{{ item.description }}</td>
            </tr>
          </tbody>
        </table>
      </span>
    </div>
  </div>
</template>

<script>
import { saveEmployeeLeave, getEmployeeLeaveById } from '@/api/employee-leave'

export default {
  name: 'Yuangongxiuzhi',
  data() {
    return {
      currentPage: '员工休职申请表',
      type: 'add', // add, edit, view
      application: {
        id: null,
        employeeName: '',
        employeeId: '',
        department: '',
        leaveReason: '',
        startDate: '',
        endDate: '',
        description: '',
        status: '待审核'
      },
      rules: {
        employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        employeeId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
        leaveReason: [{ required: true, message: '请选择休职原因', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
      }
    }
  },
  created() {
    this.type = this.$route.query.type || 'add'
    const id = this.$route.query.id
    if (id) {
      this.fetchData(id)
    }
  },
  methods: {
    async fetchData(id) {
      try {
        const res = await getEmployeeLeaveById(id)
        if (res.data.code === 200) {
          this.application = res.data.data
        }
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    goToList() {
      this.$router.push({name: 'YuangongxiuzhiList'})
    },  
    showPage(page) {
      this.currentPage = page
    },
    printForm() {
      window.print()
    },
    submitForm() {
      this.$refs.leaveForm.validate(async (valid) => {
        if (valid) {
          try {
            const res = await saveEmployeeLeave(this.application)
            if (res.data.code === 200) {
              this.$message.success('保存成功')
              this.$router.push('/main/renshi/renshidiaodong/yuangongxiuzhi/yuangongxiuzhiList')
            }
          } catch (error) {
            console.error('保存失败:', error)
          }
        }
      })
    },
    resetForm() {
      this.$refs.leaveForm.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 210mm;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 40px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page {
  width: 210mm;
  height: 297mm;
  padding: 10mm;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  page-break-after: always;
  text-align: left;
  line-height: 29.3326px;
  letter-spacing: 0.1039em;
  margin-bottom: 20px;
  font-family: "宋体";

  p {
    line-height: 2em;
    text-indent: 1.8em;
    font-family: "宋体";
  }

  ol li {
    list-style-position: inside;
    text-indent: 2.5em;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
}
label {
  display: flex;
  margin-bottom: 15px;
  justify-content: space-between;
}

input[type="text"],
input[type="date"],
select,
textarea {
  width: 85%;
  padding: 8px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background-color: #fff;
  font-family: "宋体";
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  font-family: "宋体";
}

th {
  background-color: #f2f2f2;
}

@media print {
  .page {
    page-break-after: always;
    border: none;
    box-shadow: none;
  }
  input {
    text-align: left !important;
  }
  .header {
    display: none;
  }
  form {
    border: 1px solid #ddd;
    padding: 20px;
    label {
      border-bottom: 1px solid #ddd;
    }
  }
  .button-group {
    display: none;
  }

  textarea {
    resize: none;
  }

  select {
    appearance: none;
  }

  @page {
    size: A4;
  }

  @media screen {
    .page {
      margin: 0;
      border: none;
      border-radius: initial;
      width: initial;
      min-height: initial;
      box-shadow: none;
      background: initial;
      page-break-after: initial;
    }
  }
}

.el-form {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

@media print {
  .el-form {
    padding: 0;
  }
  
  .el-form-item {
    margin-bottom: 10px;
  }
  
  .el-input__inner,
  .el-textarea__inner {
    border: none;
  }
}
</style>